import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import './message.css'
import { useNavigate, Outlet } from 'react-router-dom'
import { useThrottleFn } from 'ahooks';
import { AntOutline } from 'antd-mobile-icons'
import { Badge, Space } from 'antd-mobile'
const List = (props) => {
    const navigater = useNavigate()
    const [list, setList] = useState([])
    const getList = () => {
        const li = JSON.parse(localStorage.getItem('user'))
        axios.get(`http://localhost:3000/bjw_index/bjwuser?id=${li._id}`).then((res) => {
            setList(res.data.list)
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className='message-liao'>
            <div className="message-title">
                <div className="message-t">

                </div>
                <div className="message-tit">
                    <span>消息</span><svg t="1730258382901" className="message-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3533" width="200" height="200"><path d="M826.155104 615.141287v325.424011c0 18.3499-14.929774 33.382073-33.177275 33.382073H232.138525a33.382073 33.382073 0 0 1-33.177275-33.382073v-325.424011c0-13.844344-11.120531-25.026315-24.903436-25.026315-13.762425 0-24.882956 11.18197-24.882956 25.026315V957.235854c0 36.863639 29.695709 66.743666 66.35455 66.743666H809.566466a66.559348 66.559348 0 0 0 66.37503-66.764146V615.161767c0-13.844344-11.120531-25.026315-24.882956-25.026315-13.782905 0-24.882956 11.18197-24.882957 25.026315z" fill="#6C6C6C" p-id="3534"></path><path d="M314.057722 994.672927V861.390394c0-13.844344 11.161491-24.985355 25.026315-24.985356a24.985355 24.985355 0 0 1 25.005835 24.985356v133.282533a24.985355 24.985355 0 0 1-25.005835 24.985356 24.985355 24.985355 0 0 1-25.026315-24.985356z m173.4639-1.658863v-199.944281c0-13.823865 11.18197-24.985355 25.046795-24.985355a24.985355 24.985355 0 0 1 25.005835 24.985355v199.944281a24.985355 24.985355 0 0 1-25.005835 24.985355 24.985355 24.985355 0 0 1-25.026315-24.985355z m173.50486 0V726.428516c0-13.823865 11.18197-24.985355 25.026315-24.985355a24.985355 24.985355 0 0 1 25.005835 24.985355v266.585548a24.985355 24.985355 0 0 1-25.005835 24.985355 24.985355 24.985355 0 0 1-25.026315-24.985355zM516.070463 0.010035c-54.885862 0.819192-98.589754 46.632503-98.589754 101.456926V453.023196h50.032149V101.180244c0-27.156214 21.360431-50.318867 48.537125-51.158539a50.175508 50.175508 0 0 1 51.547655 49.97071v353.215099h50.052629V99.992415A100.125739 100.125739 0 0 0 516.070463 0.010035z" fill="#6C6C6C" p-id="3535"></path><path d="M944.91746 457.610671c10.854294 0 19.763006 7.18841 19.763006 15.994723v76.799247c0 8.806314-8.888233 15.994723-19.763006 15.994723H79.072505c-10.854294 0-19.763006-7.18841-19.763006-15.994723v-76.799247c0-8.806314 8.888233-15.994723 19.763006-15.994723h865.844955z m0-48.00465H79.072505C35.389093 409.606021 0 438.23678 0 473.605394v76.799247C0 585.773255 35.389093 614.404014 79.072505 614.404014h865.844955C988.600872 614.404014 1023.989965 585.773255 1023.989965 550.404641v-76.799247C1023.989965 438.23678 988.600872 409.606021 944.91746 409.606021z" fill="#6C6C6C" p-id="3536"></path></svg>
                </div>
                <div className="message-le" onClick={() => { navigater('/setting') }}>
                    <svg t="1730274565470" className="message-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5870" width="200" height="200"><path d="M117 171h127.946v85.375H117V171z m213.243 0H906v85.375H330.243V171zM117 469.813h127.946v85.375H117v-85.375z m213.243 0H906v85.375H330.243v-85.375zM117 768.625h127.946V854H117v-85.375z m213.243 0H906V854H330.243v-85.375z" fill="#333333" p-id="5871"></path></svg>
                </div>
            </div>
            <div className="message-body">
                <div className="message-div" onClick={() => { navigater('/order') }}>
                    <Badge content='5' content={Badge.dot} style={{ '--right': '2rem', '--top': '2.5rem' }} >
                        <div className='message-ic' >
                            <svg t="1730276937316" className="message-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6170" width="200" height="200"><path d="M117.333 117.333h789.334v789.334H117.333V117.333z m64 64v661.334h661.334V181.333H181.333z m96 106.667h469.334v64H277.333v-64z m0 149.333H640v64H277.333v-64z m0 149.334h469.334v64H277.333v-64z" fill="#ffffff" p-id="6171"></path></svg>
                        </div>
                    </Badge>
                    <div className="message-tab">
                        <span>订单消息</span><br></br>
                        <span className='message-mess'>您的订单已完结</span>
                    </div>
                    <div className="message-time">
                        <span>3分钟前</span>
                    </div>
                </div>
                <div className="message-div" onClick={() => { navigater('/interaction') }}>
                    <Badge content='5' content={Badge.dot} style={{ '--right': '2rem', '--top': '2.5rem' }} >
                        <div className='message-ic1' >
                            <svg t="1730277053867" className="message-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14834" width="200" height="200"><path d="M947.2 708.266667C976.213333 646.826667 989.866667 580.266667 989.866667 512 989.866667 249.173333 774.826667 34.133333 512 34.133333S34.133333 249.173333 34.133333 512s215.04 477.866667 477.866667 477.866667c98.986667 0 192.853333-29.013333 273.066667-85.333334l168.96 81.92c3.413333 1.706667 6.826667 3.413333 11.946666 3.413334 5.12 0 10.24-1.706667 15.36-5.12 8.533333-5.12 11.946667-15.36 10.24-23.893334l-44.373333-252.586666z m-662.186667-136.533334c-32.426667 0-59.733333-27.306667-59.733333-59.733333s27.306667-59.733333 59.733333-59.733333 59.733333 27.306667 59.733334 59.733333-27.306667 59.733333-59.733334 59.733333z m226.986667 0c-32.426667 0-59.733333-27.306667-59.733333-59.733333s27.306667-59.733333 59.733333-59.733333 59.733333 27.306667 59.733333 59.733333-27.306667 59.733333-59.733333 59.733333z m226.986667 0c-32.426667 0-59.733333-27.306667-59.733334-59.733333s27.306667-59.733333 59.733334-59.733333 59.733333 27.306667 59.733333 59.733333-27.306667 59.733333-59.733333 59.733333z" fill="#ffffff" p-id="14835"></path></svg>
                        </div>
                    </Badge>
                    <div className="message-tab">
                        <span>互动消息</span><br></br>
                        <span className='message-mess'>@用户1008600评论了你的内容</span>
                    </div>
                    <div className="message-time">
                        <span>5小时前</span>
                    </div>
                </div>
                <div className="message-div" onClick={() => { navigater('/system') }}>
                    <Badge content='5' content={Badge.dot} style={{ '--right': '2rem', '--top': '2.5rem' }} >
                        <div className='message-ic2' >
                            <svg t="1730277330301" className="message-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15953" width="200" height="200"><path d="M874.666667 725.333333h21.333333a42.666667 42.666667 0 0 1 0 85.333334H128a42.666667 42.666667 0 0 1 0-85.333334h21.333333a21.333333 21.333333 0 0 0 21.333334-21.333333V426.666667a341.333333 341.333333 0 1 1 682.666666 0v277.333333a21.333333 21.333333 0 0 0 21.333334 21.333333z m-106.666667-21.333333V426.666667a256 256 0 1 0-512 0v277.333333a21.333333 21.333333 0 0 0 21.333333 21.333333h469.333334a21.333333 21.333333 0 0 0 21.333333-21.333333zM426.666667 896h170.666666a42.666667 42.666667 0 0 1 0 85.333333h-170.666666a42.666667 42.666667 0 0 1 0-85.333333z" fill="#ffffff" p-id="15954"></path></svg>
                        </div>
                    </Badge>
                    <div className="message-tab">
                        <span>系统消息</span><br></br>
                        <span className='message-mess'>你提交的个人信息审核通过</span>
                    </div>
                    <div className="message-time">
                        <span>5小时前</span>
                    </div>
                </div>
                {list.map((item) => {
                    return <div className="message-div" key={item[0]._id} onClick={() => {
                        navigater('/private', { state: { item : item } });
                    }}>
                        <Badge content='5' content={Badge.dot} style={{ '--right': '2rem', '--top': '2.5rem' }} >
                            <div className='message-ic2' >
                                <img src={item[0].src}></img>
                            </div>
                        </Badge>
                        <div className="message-tab">
                            <span>{item[0].username}</span><br></br>
                            <br></br>
                            <span className='message-mess'>[新消息]</span>
                        </div>
                        <div className="message-time">
                            <span>{item[0].time}</span>
                        </div>
                    </div>
                })}
            </div>
        </div>
    )
}
export default List